<template>
  <view class="container">
    <u-sticky>
      <view class="header">
        <view class="search-section">
          <u-search placeholder="搜索位置、路口..." v-model="listQuery.keyword" @search="handleSearch" @change="handleSearch"></u-search>
        </view>
        <!-- 快速筛选标签 -->
        <view class="quick-filters">
          <u-tag v-for="filter in quickFilters" :key="filter.key" :text="filter.name" :type="listQuery.quickFilter === filter.key ? 'primary' : 'info'" :plain="listQuery.quickFilter !== filter.key" shape="circle"
            @click="handleQuickFilter(filter.key)"></u-tag>
        </view>
      </view>
    </u-sticky>

    <!-- 交通列表 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false" :top="10">
      <view class="traffic-list-content">
        <view class="traffic-item-card" v-for="(item, index) in list" :key="item.Id" @click="handleNavInfo(item)">
          <view class="card-image" v-if="item.face">
            <u-image :src="item.face" width="100%" height="320rpx" mode="aspectFill"></u-image>
            <view class="featured-tag" v-if="item.isFeatured">
              <u-icon name="star-fill" color="#fbbf24" size="16"></u-icon>
              <text>推荐</text>
            </view>
          </view>
          <view class="card-content">
            <text class="traffic-name">{{ item.title }}</text>
            <view class="price-area-info">
              <text class="price-value">{{ item.createTime }}</text>
            </view>
            <view class="location-info">
              <u-icon name="map" color="#64748b" size="14"></u-icon>
              <text class="address-text">{{ item.address }}</text>
            </view>
            <view class="tags-section" v-if="item.tagsJson && JSON.parse(item.tagsJson).length > 0">
              <u-tag v-for="tag in JSON.parse(item.tagsJson)" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1" border-color="transparent" size="mini" shape="circle"></u-tag>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";


  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        mescroll: null,
        downOption: {
          use: true,
          auto: true
        },
        upOption: {
          page: {
            num: 0,
            size: 10,
            time: null
          },
          empty: {
            use: true,
            icon: null,
            tip: "暂无数据",
            fixed: false,
            top: "560rpx",
          },
          textNoMore: '没有更多数据',
          toTop: {
            duration: 300,
            supportTap: false,
            btnClick: null
          }
        },
        listQuery: {
          page: 1,
          pageSize: 10,
          keyword: '',
          quickFilter: ''
        },
        list: [],

        // 快速筛选选项
        quickFilters: [
          { key: 'all', name: '全部' },
          { key: 'food', name: '查超载', },
          { key: 'shopping', name: '查摩托' },
          { key: 'entertainment', name: '查驾照' },
          { key: 'service', name: '查酒驾' }
        ]
      }
    },
    methods: {
      // mescroll初始化
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      upCallback(options) {
        this.listQuery.page = options.num
        this.listQuery.pageSize = options.size
        // console.log(`正在加载${options.num}页数据`)
        this.fetchData()
      },
      // 下拉刷新的回调 (mixin默认resetUpScroll)
      downCallback() {
        this.listQuery.page = 1
        if (this.mescroll.optUp.use) {
          this.mescroll.resetUpScroll()
        } else {
          setTimeout(() => {
            this.mescroll.endSuccess()
          }, 500)
        }
      },
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      handleSearch() {
        this.mescroll.resetUpScroll()
      },
      fetchData() {
        uni.$u.http.get('/api/traffic/list', { params: this.listQuery }).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.mescroll.endErr()
            this.$u.toast(message)
            return
          }
          let { items, page, total, totalPages } = result
          if (result.page == 1) {
            this.list = new Array()
          }
          for (let item of items) {
            if (item.imageUrls) {
              let imgs = JSON.parse(item.imageUrls)
              item.face = imgs[0]
            }
            this.list.push(item)
          }
          // console.log(result)
          this.mescroll.endSuccess(items.length, page < totalPages)
        }).catch(err => {
          console.error('获取信息失败:', err)
          this.mescroll.endErr()
        })
      },
      handleSearch() {
        // 搜索
        console.log('搜索关键词:', this.searchKeyword)
        this.mescroll.resetUpScroll()
      },
      handleNavInfo(item) {
        this.$u.route({
          url: '/pages/traffic/detail',
          params: {
            id: item.id
          }
        })
      },

      handleQuickFilter(key) {
        // 快速筛选
        this.listQuery.quickFilter = this.listQuery.quickFilter === key ? '' : key
        console.log('快速筛选:', key)
        this.mescroll.resetUpScroll()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
  }

  .header {
    position: sticky;
    background: white;
    padding: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);

    .search-section {
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-bottom: 24rpx;

      .filter-btn {
        width: 72rpx;
        height: 72rpx;
        background: #e0f2fe;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.95);
          background: #bae6fd;
        }
      }
    }

  }

  .quick-filters {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 8rpx;
    gap: 10px;
  }

  .traffic-list-content {
    padding: 10rpx;
  }

  .traffic-item-card {
    background: white;
    border-radius: 24rpx;
    overflow: hidden;
    margin-bottom: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    border: 1rpx solid #f1f5f9;
    transition: all 0.3s ease;

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    }

    .card-image {
      position: relative;
      margin-bottom: 24rpx;

      .featured-tag {
        position: absolute;
        top: 24rpx;
        left: 0;
        background: linear-gradient(90deg, #fbbf24, #fcd34d);
        color: white;
        padding: 8rpx 24rpx 8rpx 16rpx;
        border-radius: 0 20rpx 20rpx 0;
        font-size: 24rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8rpx;
        box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
      }
    }

    .card-content {
      padding: 0 32rpx 32rpx;
      display: flex;
      flex-direction: column;
      gap: 16rpx;
    }

    .traffic-name {
      font-size: 36rpx;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .price-area-info {
      display: flex;
      align-items: baseline;
      gap: 24rpx;

      .price-value {
        font-size: 40rpx;
        font-weight: 600;
        color: #ef4444;
      }

      .area-value {
        font-size: 28rpx;
        color: #64748b;
      }
    }

    .layout-info {
      font-size: 28rpx;
      color: #475569;

      .floor-text {
        color: #64748b;
      }
    }

    .location-info {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 26rpx;
      color: #64748b;
    }

    .tags-section {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16rpx;
      gap: 10upx;
    }
  }
</style>